
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据处理</title>
</head>
<body>
    
    <script>
        /* 
            1.封装转换树状结构的方法
            params:
                data:待处理的一维数组
            return:
                res：处理好的树状数据
        */
        let data = [
            { id: 1, name: 'a', pid: 0 },
            { id: 2, name: 'aa', pid: 0 },
            { id: 3, name: 'aaa', pid: 1 },
            { id: 4, name: 'aaaa', pid: 2 },
            { id: 5, name: 'aaaaa', pid: 2 },
            { id: 6, name: 'aaaaaa', pid: 2 },
            { id: 7, name: 'aaaaaaa', pid: 1 },
            { id: 8, name: 'aaaaaaa', pid: 2 },
        ]

        // 封装转换树状结构的方法 getTree()
        function getTree(data) {
            let res = []
            // 外层循环控制的是父亲查找次数
            for (let i = 0; i < data.length; i++) {
                // 
              for (let j = 0; j < data.length; j++) {
                // 内层循环遍历所有对象的属性查找pid和最外层循环中id相等的数据
                if (data[i].id ==data[j].pid ) {
                    //检测当前父亲数据中是否有孩子数据，没有就初始化空数组
                    data[i].child || (data[i].child = [])
                    // 将本次满足条件的孩子数据添加到child数组中
                    data[i].child.push(data[j])
                }
              }
               //每次父亲找完孩子数据完毕后丢到新的数组中 ，新数组中只保留一级父亲数据，孩子数据在父亲的里面
               if (data[i].child) {
                    res.push(data[i])
               }
            }

            return  res;
        }

        console.log(getTree(data));
        


        // 要求转换为 
        [
            {
                id: 1,
                name: 'a',
                pid: 0,
                child: [
                    { id: 3, name: 'aaa', pid: 1 },
                    { id: 7, name: 'aaaaaaa', pid: 1 }
                ]
            },
            {
                id: 2,
                name: 'aa',
                pid: 0,
                child: [
                    { id: 4, name: 'aaaa', pid: 2 },
                    { id: 5, name: 'aaaaa', pid: 2 },
                    { id: 6, name: 'aaaaaa', pid: 2 },
                    { id: 8, name: 'aaaaaaa', pid: 2 },
                ]
            }
        ]
    </script>
</body>
</html>